<template>
	<view class="w-100 bg-white">
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="row-ac py-2">
				<view class="flex-1 row-a-j-fc identity-box mx-3" :class="tabIndex == 0 ? 'takeTab' : ''"
					@click="tabIndex = 0">
					<view class="font-s-45 font-w text-main-color">{{ distriTeamTotal }}</view>
					<view class="font-s-3">我的代理</view>
				</view>
				<view class="flex-1 row-a-j-fc identity-box mx-3" :class="tabIndex == 1 ? 'takeTab' : ''"
					@click="tabIndex = 1">
					<view class="font-s-45 font-w text-main-color">{{ distriSubTotal }}</view>
					<view class="font-s-3">我的VIP</view>
				</view>
			</view>
			<view class="flex-1 mt-2 row font-s-4 text-light-muted" v-if="distriSubList.length == 0">无邀请用户</view>
			<view class="flex-1 mx-3" v-if="tabIndex == 0">
				<view class="flex-1 py-3 row-ac border-bottom" v-for="(item,index) in distriTeamList" :key="index"
					@click="navTouserTeam(item)">
					<view class="flex-1 row-ac">
						<view class="head-image border">
							<image :src="item.user_headimage" mode=""></image>
						</view>
						<view class="ml-2">
							<view class="font-s-35">{{ item.nick_name || item.user_name }}</view>
							<view class="font-s-2 text-muted mt">{{ item.user_phone }}</view>
							<view class="font-s-2 text-muted mt">{{ item.identity_info.identity_name }}</view>
						</view>
					</view>
					<view class="iconfont icon-next-01"></view>
				</view>
			</view>
			<view class="flex-1 mx-3" v-if="tabIndex == 1">
				<view class="flex-1 py-3 row-ac border-bottom" v-for="(item,index) in distriSubList" :key="index"
					@click="navTouserTeam(item)">
					<view class="flex-1 row-ac">
						<view class="head-image border">
							<image :src="item.user_headimage" mode=""></image>
						</view>
						<view class="ml-2">
							<view class="font-s-35">{{ item.nick_name || item.user_name }}</view>
							<view class="font-s-2 text-muted mt">{{ item.user_phone }}</view>
							<view class="font-s-2 text-muted mt">{{ item.identity_info.identity_name }}</view>
						</view>
					</view>
					<view class="iconfont icon-next-01"></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		userInfoUrl,
	} from '@/api/index.js';
	import {
		distributorsDetailUrl,
		commissionstatsUrl,
		distributorsSubUrl,
		distributorsTeamUrl
	} from '@/api/promotion';
	import {
		nowFormatTime,
		formatTime
	} from '@/utils/time.js';
	export default {
		data() {
			return {
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				userInfo: '',
				queryInfo: {
					page: 1,
					page_size: 20
				},
				tabIndex: 0,
				distriSubList: [],
				distriSubTotal: 0,
				distriTeamList: [],
				distriTeamTotal: 0
			}
		},
		// filters: {
		// 	phoneFilter(val) {
		// 		if (val != null) {
		// 			let reg = /^(.{3}).*(.{4})$/;
		// 			return val.replace(reg, "$1****$2");
		// 		}
		// 		return val;
		// 	}
		// },
		onReachBottom() {
			this.onReachBottomHandle();
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
				this.getDistributorsSub()
				this.getDistributorsTeam()
			} else {
				this.loginStatus = false
			}
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getDistributorsSub() {
				this.$R.get(distributorsSubUrl, this.queryInfo).then(res => {
					this.distriSubList = res.data.list
					this.distriSubTotal = res.data.total;
				});
			},
			getDistributorsTeam() {
				this.$R.get(distributorsTeamUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.distriTeamList = res.data.list
						this.distriTeamTotal = res.data.total;
						this.loadingState = true
					}
				});
			},
			onReachBottomHandle() {
				if (this.distriSubTotal != this.distriSubList.length) {
					this.queryInfo.page_size += 20
					this.getDistributorsSub()
				}
			},
			clickTab(index) {
				this.tabIndex = index
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			onClick(item) {
				if (this.takeUser == '') {
					this.takeUser = item.user
				} else {
					this.takeUser = ''
				}
			},
			navTouserTeam(item) {
				uni.navigateTo({
					url: '/pages/user/user-team?userId=' + item.user,
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.promotion-head {
		position: relative;

		.to-back {
			position: absolute;
			top: 90rpx;
			left: 30rpx;
		}

		.promotion-title {
			top: 150rpx;
			right: 90rpx;
			position: absolute;
		}
	}

	.user-img {
		width: 238rpx;
		height: 238rpx;
		border-radius: 50%;
		border: 20rpx solid #D2D2D2;

		image {
			width: 238rpx;
			height: 238rpx;
			border-radius: 50%;
		}
	}

	.head-image {
		width: 118rpx;
		height: 118rpx;
		border-radius: 50%;

		image {
			width: 118rpx;
			height: 118rpx;
			border-radius: 50%;
		}
	}

	.user-info-box {
		top: 45rpx;
		right: 5rpx;
		background: #fff;
		position: absolute;
		z-index: 99;

		.team-box {
			width: 100px;
		}

		.icon-a-errorlight-01 {
			border: 1rpx solid #000;
			padding: 2rpx;
			border-radius: 50%;
		}
	}

	.identity-box {
		height: 102rpx;
		border: 1rpx solid #dcdcdc;
	}

	.takeTab {
		background-color: #dcdcdc;

		view {
			color: #000;
		}
	}
</style>